<template>
  <div class="footer">
    <!-- 我们一个有两种形式的 输入框,分别是激活前激活后 -->
    <!-- 第一未激活状态 -->
    <div class="disable" v-if="!isFocus">
      <input type="text" class="commentInput" placeholder="写跟帖" @focus="showArea" />
      <div class="commentIcon">
        <div class="commentNumber">{{post.comment_length}}</div>
        <span class="iconfont iconpinglun-"></span>
      </div>
      <span class="iconfont iconshoucang" :class="
          {red : post.has_star}" @click="star"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <!-- 这里下面准备写激活后的状态 -->
    <div class="enable" v-if="isFocus">
      <textarea class="commentArea" v-model="comment" rows="3" @blur="handleBlur" ref="commentArea"></textarea>
      <div class="btnSend" @click="send">发送</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["post",'replyObj','isActive'],
  data() {
    return {
      // 这里是记录聚焦状态的变量,默认没有被聚焦
      isFocus: false,
      comment: ''
    };
  },
  methods: {
    // 失去焦点的时候，判断文本框有没有内容，没有内容实现隐藏，没有内容失去焦点，把isFocus改为false
    handleBlur(){
      if(!this.comment){
        this.isFocus=false
      }
    },
    // 点击发送，判断里面有没有内容，有内容就发送axios后，清空文本框内容，把isFocus改为false，实现隐藏文本框，否则不用理
    send(){
      if(this.comment){
        this.$axios({
          url: '/post_comment/' + this.post.id,
          method: 'post',
          data:{
            content:this.comment,
            parent_id: this.replyObj ? this.replyObj.id : null
          }
        }).then(res=>{
           // 发送这个评论完成,所以需要清空评论框,将评论框缩小
          this.comment='',
          this.isFocus=false;
           // 请求发送完毕,为了更新页面数据,需要向父组件触发一个自定义事件
          this.$emit('newComment')
          // this.$emit('newData')
        })
      }
    },
    star() {
    //   console.log("点击了收藏按钮");
      this.$axios({
        url: "/post_star/" + this.post.id,
        method: "get"
      }).then(res => {
        const { message } = res.data;
        // 这里需要判断到底做了个啥,
        // 是收藏呢,还是取消收藏
        if (message == "收藏成功") {
          this.post.has_star = true;
        } else if (message == "取消成功") {
          this.post.has_star = false;
        }
      });
    },
    showArea() {
      // 获取焦点后，把isFocus值改为true,显示获取焦点后的状态
      this.isFocus = true;
      // 这里即使你改变了 data 数据,
      // vue 是会等你的剩余代码执行完了才更新页面
      // 所以你现在是获取不到这个 被 v-if 抹去的 dom 的
      // 有一个函数可以设置一个异步回调,告诉 vue 等待我们下一次渲染完毕的时候
      // 再执行回调函数
      this.$nextTick(() => {
        // 进入自动获取焦点
        this.$refs.commentArea.focus();
      });
    }
  },
  watch:{
    isActive(){
      this.isFocus=this.isActive;
      this.$nextTick(()=>{

        this.$refs.commentArea.focus();
      })

    }
  }
};
</script>

<style lang="less" scoped>
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f2f2f2;
  // 第一未激活状态样式
  .disable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2.778vw;
    margin-bottom: 1.389vw;
    .commentInput {
      height: 8.611vw;
      line-height: 8.611vw;
      font-size: 3.889vw;
      border: none;
      outline: none;
      border-radius: 4.444vw;
      padding: 0 4.444vw;
      background: #d7d7d7;
      color: #666;
    }
    .iconfont {
      font-size: 6.389vw;
    }
    .commentIcon {
      position: relative;
      .commentNumber {
        position: absolute;
        top: -2.222vw;
        left: 0.556vw;
        height: 4.444vw;
        line-height: 4.444vw;
        font-size: 3.333vw;
        background-color: red;
        padding: 0 0.833vw;
        border-radius: 3.611vw;
        color: white;
      }
    }
  }
  .red{
      color: red;
  }
  // 这里下面准备写激活后的状态样式
  .enable {
    display: flex;
    padding: 2.778vw;
    justify-content: space-between;
    align-items: flex-end;
    .commentArea {
      width: 75vw;
      background: #d7d7d7;
      color: #666;
      box-sizing: border-box;
      border: none;
      outline: none;
      border-radius: 2.222vw;
      padding: 4.444vw;
      resize: none;
    }
    .btnSend {
      background: red;
      color: white;
      padding: 0 4.167vw;
      height: 7.222vw;
      line-height: 7.222vw;
      border-radius: 3.611vw;
      border: 1px solid red;
      font-size: 14px;
    }
  }
}
</style>